<template>
  <div class="wty-header-bar">
    <div class="wty-header-bar-content">
      <div class="wty-header-bar-left">
        <div class="wty-header-bar-city">
          <span class="el-icon-location-information"></span>
          <span class="city-text">南京</span>
          <span class="change-city">切换城市</span>
        </div>
        <div class="wty-header-bar-list">
          <ul>
            <li>[</li>
            <li>句容</li>
            <li>仪征</li>
            <li>马鞍山</li>
            <li>]</li>
          </ul>
        </div>
        <div class="wty-header-bar-user">
          <a class="login" href="#">立即登录</a>
          <a class="register" href="#">注册</a>
        </div>
      </div>
      <div class="wty-header-bar-right">
        <ul>
          <li>我的美团</li>
          <li>手机APP</li>
          <li>商家中心</li>
          <li>美团规则</li>
          <li class="dropdown">
            <div class="dropdiv">网站导航</div>
            <div class="dropdown-content">
              <div class="content-wrapper">
                <div class="dropdown-hotel">
                  <h2>酒店旅游</h2>
                  <ul>
                    <li v-for="hotel in hotels" :key="hotel.index">
                      {{ hotel }}
                    </li>
                  </ul>
                </div>
                <div class="dropdown-food">
                  <h2>吃美食</h2>
                  <ul>
                    <li v-for="food in foods" :key="food.index">{{ food }}</li>
                  </ul>
                </div>
                <div class="dropdown-movie">
                  <h2>看电影</h2>
                  <ul>
                    <li v-for="movie in movies" :key="movie.index">
                      {{ movie }}
                    </li>
                  </ul>
                </div>
                <div class="dropdown-app">
                  <h2>手机应用</h2>
                  <ul>
                    <li v-for="app in apps" :key="app.index">
                      <img :src="app" />
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hotels: [
        "国际机票",
        "火车票",
        "民宿",
        "经济型酒店",
        "主题酒店",
        "商务酒店",
        "公寓",
        "豪华酒店",
        "客栈",
        "青年旅社",
        "度假酒店",
        "别墅",
        "农家院"
      ],
      foods: ["烤鱼", "特色小吃", "烧烤", "自助餐", "火锅", "代金券"],
      movies: [
        "热映电影",
        "热门影院",
        "热映电影口碑榜",
        "最受期待电影",
        "国内票房榜",
        "北美票房榜",
        "电影排行榜"
      ],
      apps: [
        "http://s0.meituan.net/bs/fe-web-meituan/2d53095/img/appicons/meituan.png",
        "https://s1.meituan.net/bs/fe-web-meituan/404d350/img/appicons/waimai.png",
        "https://p0.meituan.net/travelcube/162c3308d9622f6d9cfaa49e60be4dca8573.png",
        "https://s1.meituan.net/bs/fe-web-meituan/404d350/img/appicons/dianping.png",
        "https://s1.meituan.net/bs/fe-web-meituan/404d350/img/appicons/maoyan.png"
      ]
    };
  }
};
</script>

<style lang="scss" scoped>
.wty-header-bar {
  background-color: #f8f8f8;
  .wty-header-bar-content {
    width: 1190px;
    height: 40px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    .wty-header-bar-city {
      display: flex;
      align-items: center;
      .change-city {
        display: block;
        margin-left: 4px;
        border: 1px solid #eeeeee;
        cursor: pointer;
        &:hover {
          color: orange;
        }
      }
    }
    .wty-header-bar-left {
      display: flex;
      align-items: center;
      .wty-header-bar-list {
        margin: 0 2px;
        ul {
          display: flex;
          li {
            padding: 0 2px;
            cursor: pointer;
            &:first-child {
              margin: 0;
            }
            &:last-child {
              margin: 0;
            }
            &:hover {
              color: orange;
            }
          }
        }
      }
      .wty-header-bar-user {
        display: flex;
        .login {
          margin-left: 20px;
          margin-right: 10px;
          cursor: pointer;
          color: orange;
        }
        .register:hover {
          color: orange;
        }
      }
    }
    .wty-header-bar-right {
      display: flex;
      align-items: center;
      ul {
        display: flex;
        height: 100%;
        li {
          height: 100%;
          display: flex;
          justify-content: center; // 水平居中
          align-items: center; // 垂直居中
          padding: 0 14px;
          cursor: pointer;
          &:hover {
            background-color: white;
            box-shadow: 0 -1px 0 1px rgba($color: #696969, $alpha: 0.1); // 1px阴影大小 2px模糊度
          }
          &:hover .dropdiv {
            color: orange;
          }
        }
        li.dropdown {
          position: relative;
          z-index: 999; // 让网站导航显示在页面最上面
          .dropdiv {
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: center;
          }
          .dropdown-content {
            position: absolute;
            display: none;
            background-color: white;
            right: 0;
            top: 40px;
            padding: 40px 60px;
            border-bottom-left-radius: 3px;
            border-bottom-right-radius: 3px;
            border-top-left-radius: 3px;
            .content-wrapper {
              display: flex;
              .dropdown-hotel {
                width: 234px;
                flex: 0 0 234px;
                h2 {
                  font-size: 14px;
                  font-weight: 700;
                  text-align: center; // 内容居中
                  height: 40px;
                  line-height: 40px;
                }
                ul {
                  display: flex;
                  flex-wrap: wrap; // 折行
                  li {
                    width: 78px;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    padding: 0;
                    &:hover {
                      box-shadow: none;
                    }
                  }
                }
              }
              .dropdown-food {
                width: 156px;
                flex: 0 0 156px;
                margin-left: 60px;
                h2 {
                  font-size: 14px;
                  font-weight: 700;
                  text-align: center; // 内容居中
                  height: 40px;
                  line-height: 40px;
                }
                ul {
                  font-size: 0;
                  display: block;
                  li {
                    display: inline-block;
                    width: 78px;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    padding: 0;
                    font-size: 12px;
                    &:hover {
                      box-shadow: none;
                    }
                  }
                }
              }
              .dropdown-movie {
                width: 90px;
                flex: 90px;
                margin-left: 60px;
                h2 {
                  font-size: 14px;
                  font-weight: 700;
                  text-align: center; // 内容居中
                  height: 40px;
                  line-height: 40px;
                }
                ul {
                  font-size: 0;
                  display: block;
                  li {
                    display: inline-block;
                    width: 90px;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    padding: 0;
                    font-size: 12px;
                    &:hover {
                      box-shadow: none;
                    }
                  }
                }
              }
              .dropdown-app {
                width: 380px;
                flex: 380px;
                margin-left: 60px;
                h2 {
                  font-size: 14px;
                  font-weight: 700;
                  text-align: center; // 内容居中
                  height: 40px;
                  line-height: 40px;
                }
                ul {
                  font-size: 0;
                  display: block;
                  padding-top: 30px;
                  li {
                    font-size: 0;
                    display: inline-block;
                    width: 60px;
                    height: 60px;
                    padding: 0;
                    margin-left: 15px;
                    img {
                      width: 60px;
                      height: 60px;
                    }
                    &:hover {
                      box-shadow: none;
                    }
                  }
                }
              }
            }
          }
          &:hover .dropdown-content {
            // 鼠标放到网站导航上，显示
            display: block;
            box-shadow: 0 1px 0 1px rgba($color: #696969, $alpha: 0.1); // 1px阴影大小 2px模糊度
            border-top: none;
          }
        }
      }
    }
  }
}
</style>
